<script setup lang="ts">
import { createCanvas } from '@/lib/canvas'
import {
  createViewPort,
  creatTraceRayWithSpheres,
  type IPoint,
  type ISphere,
  type Light
} from '@/lib/graphic'
import { costTime } from '@/lib/utils'
import { onMounted, reactive, ref, watch, watchEffect } from 'vue'
import { debounce } from 'lodash'
import tinycolor from 'tinycolor2'
import PosCtrl from '@/components/PosCtrl.vue'

const refCanvas = ref()
const width = 600,
  height = 600
const canvas = createCanvas(refCanvas)
onMounted(() => {
  // //画：一片绿
  // function drawGreen() {
  //   for (let x = 0; x < width; x++) {
  //     for (let y = 0; y < height; y++) {
  //       canvas.PutPixel(x, y, '#0f0')
  //     }
  //   }
  // }
  // costTime('画：一片绿', drawGreen)
  //画：一片绿2
  // function drawGreen2() {
  //   canvas.DrawView(width, height, () => '#0f0')
  // }
  // costTime('画：一片绿2', drawGreen2)
  //书中例1@p24:画一组球体
  // function examlpe01() {
  //   const shperes: ISphere[] = [
  //     { center: { x: 0, y: -1, z: 3 }, radius: 1, color: '#f00' },
  //     { center: { x: 2, y: 0, z: 4 }, radius: 1, color: '#00f' },
  //     { center: { x: -2, y: 0, z: 4 }, radius: 1, color: '#0f0' }
  //   ]
  //   const traceColor = createViewPort(
  //     1,
  //     { width: 1, height: 1 },
  //     { width, height }
  //   ).createTraceColor(creatTraceRayWithSpheres(shperes, '#aaa'))
  //   canvas.DrawView(width, height, traceColor)
  // }
  // costTime('画一组球体', examlpe01)
  // function examlpe01_01() {
  //   const shperes: ISphere[] = [
  //     { center: { x: 0, y: -1, z: 3 }, radius: 1, color: '#f00' },
  //     { center: { x: 0, y: 0, z: 4 }, radius: 1, color: '#00f' },
  //     { center: { x: -2, y: 0, z: 4 }, radius: 1, color: '#0f0' }
  //   ]
  //   const traceColor = createViewPort(
  //     1,
  //     { width: 1, height: 1 },
  //     { width, height }
  //   ).createTraceColor(creatTraceRayWithSpheres(shperes, '#aaa'))
  //   canvas.DrawView(width, height, traceColor)
  // }
  // costTime('画一组球体-移动', examlpe01_01)
  //todo 画：圆形

  // 动起来
  // watch(
  //   [posShpere01, posShpere02, posShpere03],
  //   () => {
  //     console.log('run:')
  //     examlpe01_reactive$debounce()
  //   },
  //   { immediate: true }
  // )
  watchEffect(() => {
    costTime('画一组球体:动起来', examlpe01_reactive)
  })
})
//排成3角
const posShpere01 = reactive<IPoint>([0, -1, 3])
const posShpere02 = reactive<IPoint>([2, 0, 4])
const posShpere03 = reactive<IPoint>([-2, 0, 4])
//排成3角
// const posShpere01 = reactive([   -0.6,   -0.7,   4 ])
// const posShpere02 = reactive([   0.6,   -0.7,   4 ])
// const posShpere03 = reactive([   0,   0.9,   4 ])
//穿模，z太近 显示球内了
// const posShpere01 = reactive([   -0.8,   -0.2,   1.7 ])
// const posShpere02 = reactive([   0,   -0.2,   3.1 ])
// const posShpere03 = reactive([   1.4,   0.2,   4 ])
function examlpe01_reactive() {
  const shperes: ISphere[] = [
    { center: posShpere01, radius: 1, color: [255, 0, 0, 255] },
    { center: posShpere02, radius: 1, color: [0, 0, 255, 255] },
    { center: posShpere03, radius: 1, color: [0, 255, 0, 255] },
    //背景黄色巨大球
    { center: [0, -5001, 0], radius: 5000, color: [255, 255, 0, 255] }
  ]

  //打光
  let lights: Light[] = [
    {
      type: 'ambient',
      intensity: 0.2
    },
    {
      type: 'point',
      intensity: 0.6,
      position: [2, 1, 0]
      // position: { x: 2, y: 0, z: 0 }
    },
    {
      type: 'directional',
      intensity: 0.2,
      direction: [1, 4, 4]
      // direction: { x: 0, y:0, z: 4 }
    }
  ]
  //没光
  // lights = undefined

  const traceColor = createViewPort(1, [1, 1], [width, height]).createTraceColor(
    creatTraceRayWithSpheres(shperes, [255, 255, 255, 255], lights)
  )
  canvas.DrawView(width, height, traceColor)
}
const examlpe01_reactive$debounce = debounce(() => {
  costTime('画一组球体:动起来', examlpe01_reactive)
}, 300)

/**
 * 打光后为什么 背景透明了？
 *
 */
</script>
<template>
  <div>
    <h1>画几个个有颜色的圆</h1>
    <pre>
      canvas: drawPixed
      遍历 canvas 的每一个像素，拿到颜色，画
      - 拿到颜色: 摄像到画布点在场景中与场景的交点？交点色：背景色
    </pre>
    <canvas ref="refCanvas" :width="width" :height="height"></canvas>
    <div class="controls">
      <div>
        红
        <PosCtrl :pos="posShpere01" />
      </div>
      <div>
        蓝
        <PosCtrl :pos="posShpere02" />
      </div>
      <div>
        绿
        <PosCtrl :pos="posShpere03" />
      </div>
    </div>
  </div>
</template>

<style>
.controls {
  display: flex;
}
</style>
